<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600" style="width:800px;height: 600px;"></canvas>
		<video width="800" height="" src="img/mov_bbb.mp4" controls="controls"></video>
		
		
		<script type="text/javascript">
			var video = document.querySelector("video")
			var canvas = document.querySelector("#canvas")
			
			var interId;
			var ctx = canvas.getContext('2d')
			video.onplay = function(){
				interId = setInterval(function(){
					ctx.clearRect(0,0,800,600)
					ctx.fillRect(0,0,800,600)
					ctx.drawImage(video,0,70,800,440)
					
					ctx.font = "20px 微软雅黑"
					ctx.strokeStyle = "#999"
					ctx.strokeText("老陈打码",50,50)
					
				},32)
			}
			video.onpause = function(){
				clearInterval(interId)
			}
		</script>
	</body>
</html>
